<template>
  <div class="">
    <!-- 添加查询按钮 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-button type="primary" @click="toAdd">添加</el-button>
        <el-form-item style="margin-left: 10px">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="禁用" value="禁用"></el-option>
            <el-option label="正常" value="正常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Onsearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="realname" label="姓名"> </el-table-column>
        <el-table-column prop="telephone" label="手机号"> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === '正常'">{{
              scope.row.status
            }}</el-tag>
            <el-tag type="danger" v-else>{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button @click="toEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" @click="deleteById(scope.row.id)"
              >删除</el-button
            >
            <el-button type="text" @click="toDeatils(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item
            label="用户名"
            :label-width="formLabelWidth"
            prop="username"
          >
            <el-input
              placeholder="请输入用户名"
              v-model="form.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="姓名"
            :label-width="formLabelWidth"
            prop="realname"
          >
            <el-input
              placeholder="请输入姓名"
              v-model="form.realname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            :label-width="formLabelWidth"
            prop="telephone"
          >
            <el-input
              placeholder="请输入手机号"
              v-model="form.telephone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth"
            prop="password"
          >
            <el-input
              placeholder="请输入密码"
              v-model="form.password"
              clearable
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item
            label="性别"
            :label-width="formLabelWidth"
            prop="gender"
          >
            <el-radio v-model="form.gender" label="male">男</el-radio>
            <el-radio v-model="form.gender" label="female">女</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  pageQuery,
  saveOrUpdate,
  deleteById,
  findUserDetailsById,
} from "@/api/base";
import { uploadFileURL } from "@/utils/config";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      searchForm: {},
      uploadFileURL,
      // 表格绑定的数据
      tableData: [],
      // 双向数据绑定表单
      form: {},
      // 控制表单控件宽度
      formLabelWidth: "80px",
      // 控制模态框显示与隐藏
      visible: false,
      // 模态框title变量
      title: "",
      total: 0,
      params: {
        page: 1,
        pageSize: 10,
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    params: {
      handler() {
        this.queryPage();
      },
      deep: true,
    },
  },
  // 组件方法
  methods: {
    // 跳转到详情页 使用编程式导航实现
    toDeatils(id) {
      this.$router.push({
        path: "/details/index",
        query: {
          id: id,
        },
      }); 78
    },
    // 删除
    async deleteById(id) {
      this.$confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteById({ id });
          console.log(res);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          // 重载数据
          this.queryPage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    toEdit(row) {
      this.form = { ...row };
      this.title = "编辑顾客信息";
      this.visible = true;
    },
    // 添加
    toAdd() {
      this.visible = true;
      this.title = "添加顾客信息";
      this.form = {};
    },
    // 模糊查询
    Onsearch() {
      this.queryPage();
    },
    // 模糊分页数据查询
    async queryPage() {
      let temp = {
        ...this.params,
        ...this.searchForm,
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQuery(temp);
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.params.page = 1;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val;
    },
    // 保存
    toSave() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          let res = await saveOrUpdate(this.form);
          this.$notify.success({
            title: "更新成功",
            message: res.message,
            type: "success",
          });
          this.toClose();
          this.queryPage();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
      // console.log(res);
    },
    toClose() {
      this.$refs["ruleForm"].resetFields();
      setTimeout(() => {
        this.visible = false;
      }, 100);
      for (let key in this.form) {
        this.form[key] = "";
      }
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.queryPage();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
